<template>
  <el-container id="Home">
  <el-aside class="Home_aside" width="210px">
    <div class="aside_title">
      <span>智能电表</span>
    </div>
    <div class="aside_content">
      <CommonAside :asideMenuList='asideMenuList'
      ></CommonAside>
    </div>
  </el-aside>
  <el-container class="Home_content">
    <el-header class="Home_header">
      <div class="username">
          <div class="avatar">
<!--            头像二级菜单-->
            <el-popover
              placement="bottom"
              trigger="hover"
              width="50"
            >
              <div class="selectList">
                <div @click="$router.push({path:'/accountManage/userInfo'})">
                  个人资料
                  <span class="el-icon-user"></span>
                </div>
                <div @click="$router.push({path:'/accountManage/changePW'})">
                  修改密码
                  <span class="el-icon-lock"></span>
                </div>
                <div @click="logout">
                  退出登录
                  <span class="el-icon-right"></span>
                </div>
              </div>

          <el-avatar slot="reference" src="https://joey_ma.gitee.io/head_portrait.jpg"></el-avatar>
            </el-popover>
        </div>
        <div class="username_title">
          <div class="welcome">欢迎你</div>
          <div class="name" >{{username}}</div>
        </div>
      </div>
<!--      顶部标签栏-->
      <div class="routerTabs">
        <el-tabs closable v-model="activeTab"  @tab-click="handleTabClick" @tab-remove="handleClose" >
          <el-tab-pane
            v-for="(item,index) in openedTab"
            :label="item.label"
            :key="index"
            :name="item.label"

          ></el-tab-pane>

        </el-tabs>
      </div>
    </el-header>
    <el-main class="Home_main">

      <router-view v-if="isRouterAlive"></router-view>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
import CommonAside from 'components/common/commonAside.vue'
import {logout} from "@/api/login/login";
import {getUserInfo} from "@/api/accountManage/userInfo"
import router from "@/router";
export default {
  mounted() {

  },
  provide(){
    return {
      reload : this.reload
    }
  },
  data() {
    return {
      isRouterAlive:true,
      // activeTab:this.$store.getters.getIsActive
    }
  },
  components: {
    CommonAside
  },
  methods:{
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function () {
        //局部刷新，控制组件存活
        this.isRouterAlive = true;
      })

    },
    logout(){

      this.$confirm('确认登出？','登出',{
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        center: true
      }).then(()=>{
        logout().then(res=>{
          if (res.data.code == 200){
            this.$notify.success('成功登出')
            router.push('/')
          }
          else {
            this.$notify.error('登出失败，请查看控制台');
            console.log(res.data.message);
          }
        }).catch(error=>{
          this.$notify.error('登出失败，请查看控制台');
          console.log(error);
        })
      }).catch(()=>{

      })

    },
    handleClose(name){
      if (name ==='首页'){
        this.$message({
          type:'warning',
          showClose: true,
          message:'首页标签不可删除',
          duration:1500
        });
        return false;
      }
      else  if (name === this.activeTab){
        this.$confirm('关闭当前页面?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(()=>{
          router.push({path:'/index'});
          return this.$store.commit('delOpenTab',name);
        }).catch(()=>{})
      }
     else {
        return  this.$store.commit('delOpenTab',name);
      }
    },
    handleTabClick(tab){
      const tabName = tab.name;
      const list = this.openedTab;
      list.forEach(item =>{
        if (item.label === tabName){
          //前往该页面
          router.push({path:`${item.path}`})
        }
      })
    }
  },
  computed:{
    asideMenuList: function () {
      return this.$store.state.aside.menu
    },
    username: function () {
      return this.$store.state.user.username
    },
    openedTab:function () {
      return this.$store.state.aside.openedTab
    },
    activeTab:{
      get(){
        return this.$store.getters.getIsActive
      },
      set(val){

      }
    }
  },
  watch:{
    '$route'(to,form){
      let {name:label,fullPath:path} = to

      let routeItem = {
        label,
        path
      }
      this.$store.commit('selectMenu', routeItem);
      this.$store.commit('setActiveItem',label);
    }
  }
}
</script>

<style lang="scss" scoped>
.selectList{
  user-select:none;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 100px;
  div{
    width: 100%;
    height: 100%;
    padding-top: 0.45rem;
    cursor: pointer;
    text-align: center;
    border-radius: .2rem;
    a{
      user-select:none;
      color: black;
      text-decoration: none;
    }
  }
  div:hover {
    color: #0081ff;
    background-color: rgba(140, 196, 253,.5);
    a{
      color: #0081ff;
    }
  }
}
#Home {
  width: 100%;
  height: 100%;

  .Home_aside {

    box-sizing: border-box;
    border-right: 1px solid #e6e6e6;
    .aside_title {
      span{
        -webkit-background-clip: text;
        color: transparent;
        font-family: Microsoft YaHei;
        background-image:linear-gradient(177deg,#52e5e7,#130cb7);
      }

      width: 100%;
      //background-color: #001657;
      border-radius: .25rem;
      border-bottom:2px solid;
      height: $header-height;
      color:#0081ff;
      box-sizing: border-box;
      line-height:$header-height;
      text-align: center;
      font-weight: bold;
      font-size: 24px;
    }
    .aside_content {
      width:100%;
      height: calc(100% - #{$header-height});
    }
  }
  .Home_content {
    min-width: 650px;
    background-color: #f7f7f7;
    .Home_header {
      //background: $header-back-color;
      position: relative;
      .username {
        position: absolute;
        right: 50px;
        bottom: -1px;
        font-weight: 500;
        display: flex;
        flex-direction: row;
        .username_title {
          font-family:Helvetica Neue ;
          margin-left:1.25rem;
          line-height:1.25rem;
          color: #005a9e;
          display: flex;
          flex-direction: column;
          .name {
            color: black;
            //font-family: PingFangSC-Medium,serif;
            size: 14px;
          }
        }
      }
      }
    .Home_main {
      box-sizing: border-box;
      background: #fff;
      margin: 15px;
      border-radius: 10px;
      box-shadow: 0px 0px 10px 1px rgba(80, 80, 80, 0.2);
    }
    .equipment_statistics{
      display: flex;
      padding: 10px 10px;
      position: relative;
      margin:  10px auto;
    }
    .el-col{
      text-align: center;
      margin: 10px;

    }
    .payCostStatistics{
      flex-direction: row;
      padding: 10px 10px;
    }
  }

}
.routerTabs{
  user-select: none;
  width: 80%;
  position: relative;
  top: 30px;
  float: bottom;
}
</style>
